<template>
  <span :style="`font-size: ${size}px;`" class="SvgIcon">
    <svg aria-hidden="true" style="width:1em; height: 1em;">
      <use :href="symbolId" :fill="color" />
    </svg>
  </span>
</template>

<script>
import { defineComponent, computed } from 'vue'

export default defineComponent({
  name: 'SvgIcon',
  props: {
    prefix: {
      type: String,
      default: 'icon',
    },
    name: {
      type: String,
      required: true,
    },
    color: {
      type: String,
      default: 'none',
    },
    size: {
      type: Number,
      default: 12,

    }
  },
  setup (props) {
    const symbolId = computed(() => `#${props.prefix}-${props.name}`)
    return { symbolId }
  },
})
</script>
<style scoped>
.SvgIcon {

  display: flex;
  justify-content: center;
  align-items: center;
}
</style>